import React from 'react';
import {Layout,Select,Input,Table } from 'antd'
// import {SearchOutlined } from '@ant-design/icons';
import './Check.css'
import axios from "../../../util/http";
import * as url from "../../../util/api";
const { Option } = Select;
const {Search} = Input



function handleChange(value) {
    console.log(`selected ${value}`);
    // selectValue =`selected ${value}`
}
// function onChange(pagination, filters, sorter, extra) {
//     console.log('params', pagination, filters, sorter, extra);
// }
// function onChangeA(date, dateString) {
//     console.log(date, dateString);
// }
//客户对账单
class CustomerStatement extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
            getData:'',
            nextData:'',
        }
    }
    componentDidMount() {
        axios({
            url:url.getKeHuOrder,
            method:'get',
        }).then(res=>{
            // console.log(res.data.data)
            this.setState({
                getData:res.data.data,
                nextData:res.data.data,
            })
        })
    }
    searchData=(value)=>{
        // console.log(value)
        let Data = this.state.getData
        if (value===''){
            let next = this.state.nextData
            this.setState({
                getData:next
            })
        } else{
            let newData = Data.filter(item=>{
                return item.dealersName===value
            })
            this.setState({
                getData:newData
            })
        }

    }
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    render() {
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const columns = [
            {
                title: '账单编码',
                dataIndex: 'zhangDanNum',
                align:'center',
            },
            {
                title: '经销商名称',
                dataIndex: 'dealersName',
                align:'center',
            },
            {
                title: '账单期间',
                dataIndex: 'zhangDanTime',
                align:'center',
            },
            {
                title: '期初余额',
                dataIndex: 'startMoney',
                align:'center',
            },
            {
                title: '本期应收',
                dataIndex: 'xianZaiMoney',
                align:'center',
            },
            {
                title: '本期应退',
                dataIndex: 'xianZaiShouMoney',
                align:'center',
            },
            {
                title: '本期已收',
                dataIndex: 'xianZaiTuiMoney',
                align:'center',
            },
            {
                title: '本期已退',
                dataIndex: 'YiShouMoney',
                align:'center',
            },
            {
                title: '本期余额',
                dataIndex: 'yuE',
                align:'center',
            },
        ];
        return (
            <div>
                <Layout style={{backgroundColor:'white',marginTop:'5px'}}>
                        <div className='Top'>
                            <Select bordered={false} style={{marginLeft:'10px',width:120,marginRight:'20px'}} defaultValue="经销商名称"  onChange={handleChange}>
                                <Option value="经销商名称">经销商名称</Option>
                                <Option value="按账单编号">按账单编号</Option>
                            </Select>
                            <Search
                                placeholder="请输入支付流水号/单号/经销商名称"
                                onSearch={this.searchData}
                                style={{width:400}}
                            />
                        </div>
                </Layout>
                <div className='tableBox'>
                    <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.getData} />
                </div>
            </div>
        );
    }
}

export default CustomerStatement;